<template>
  <!-- 合作商点位数 -->
  <div class="box partner-node-collect">
    <div class="header">
      <div class="title">合作商点位数Top5</div>
      <span class="el-icon-more more" />
    </div>
    <el-row class="body" type="flex" align="middle" style="margin-left: -10px; margin-right: -10px;">
      <el-col :span="17" style="padding-left: 10px; padding-right: 10px;">
        <div ref="pieChart" class="chart" />
      </el-col>
      <el-col :span="7" style="padding-left: 10px; padding-right: 10px;">
        <div class="collect">
          <div class="count">{{ nodeCount }}</div>
          <div class="name">点位数</div>
          <div class="count count2">{{ partnerCount }}</div>
          <div class="name">合作商数</div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import { getNodeCountAPI, getPartnerCountAPI, getNodeCollectAPI } from '@/api/workbench'
import echarts from '@/utils/echarts'
export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      nodeCount: 0,
      partnerCount: 0
    }
  },
  computed: {
  },
  watch: {},
  created() {
    this.getNodeCount()
    this.getPartnerCount()
  },
  mounted() {
    this.thePieChart()
  },
  methods: {
    // 获取点位总数
    async getNodeCount() {
      const { data } = await getNodeCountAPI()
      this.nodeCount = data
    },
    // 获取合作商总数
    async getPartnerCount() {
      const { data } = await getPartnerCountAPI()
      this.partnerCount = data
    },
    // 饼状图
    async thePieChart() {
      const { data } = await getNodeCollectAPI()
      const itemStyleColor = [
        { color: '#92b7ff' },
        { color: '#a8ffcf' },
        { color: '#ffc298' },
        { color: '#d9ffff' },
        { color: '#d1e0fd' }
      ]
      const sumValue = data.reduce((sum, item) => {
        sum += item.value
        return sum
      }, 0)
      data.map((item, index) => {
        item.value = item.value * 100 / sumValue
        item.itemStyle = itemStyleColor[index]
        return item
      })
      const myChart = echarts.init(this.$refs.pieChart)
      // 绘制图表
      myChart.setOption({
        series: [{
          name: '半径模式',
          type: 'pie',
          radius: ['20%', '80%'],
          center: ['40%', '50%'],
          roseType: 'radius',
          label: {
            color: '#333',
            lineHeight: 14,
            fontWeight: '700',
            formatter: e => {
              return `${e.name}\n${e.data.value}%`
            }
          },
          data
        }]
      })
    }
  }
}
</script>
<style scoped lang='scss'>
@import "~@/styles/home.scss";
.partner-node-collect{
  .chart {
    padding-left: 40px;
    width: 100% !important;
    height: 240px !important;
  }
}
</style>
